[React] 렌더링 트리거와 커밋
2024-11-26
리엑트의 렌더링과 커밋
지난 포스팅에서는 리액트의 렌더링의 코어인 가상 DOM에 대해서 알아보았다. 지난 내용에 이어서 이번 포스팅에서는 리액트의 렌더링과 커밋이란 개념에 대해서 알아볼 것이다. 리액트의 렌더링이 발생하는 시점은 언제이고, 어느 순간 리렌더링이 발생하는지 살펴볼 것이다.
리액트의 렌더링이란
리액트의 렌더링이란 컴포넌트를 화면에 표시하는 작업이다. 즉, 요구되는 이미지를 브라우저의 화면에 잘 전달하는 과정이라 할 수 있다. 레스토랑의 서빙 직원이 손님의 주문을 주방에 전달하고, 주방에서 주문을 준비하고, 최종적으로 손님에게 음식을 내오는 과정과 유사하다. 리액트의 렌더링은 3단계에 걸쳐 발생한다.
- 렌더링 트리거
- 컴포넌트 렌더링
- DOM에 커밋
위의 3 단계에 걸쳐 리액트의 렌더링이 어떻게 완료되는지에 대해 알아보겠다.
1 단계 : 렌더링 트리거
리액트에서는 렌더링이 발생하는 트리거가 존재한다. 즉, 어느 시점을 기준으로 컴포넌트가 렌더링 되는 것이다. 렌더링 트리거는 다음과 같다.
- 컴포넌트의 초기 렌더링
- 컴포넌트 내의 State 업데이트
우선 리액트는 앱을 실행하며 처음으로 렌더링을 트리거한다. 그렇다면 재렌더링은 언제 트리거될까? 이는 컴포넌트의 set함수를 통해 상태가 업데이트될 때 트리거된다.
자식 컴포넌트에게 미치는 영향
리액트의 렌더링 트리거는 대표적으로 위의 2가지 경우가 있다. 추가적으로 기억해야할 것은 특정 컴포넌트의 렌더링이 트리거될 때, 그 자식 컴포넌트의 렌더링에도 영향을 미친다는 것이다. 자식 컴포넌트의 렌더링이 트리거 되는 경우는 다음과 같은 2 가지다.
- 부모 컴포넌트에게 전달 받은 props가 변경될 때
- 부모 컴포넌트가 리렌더링 될 때
이처럼 자식 컴포넌트는 부모 컴포넌트의 리렌더링에 영향을 받게 된다. 만약 부모 컴포넌트 내부의 상태값 변경으로 인해 리렌더링이 될 경우, 기본적으로 자식 컴포넌트들은 모두 리렌더링이 된다.
2 단계 : 리액트의 컴포넌트 렌더링
위처럼 렌더링이 트리거 된다면, 리액트는 컴포넌트를 호출하여 화면에 표시할 내용을 파악한다. 렌더링 단계는 이처럼 리액트에서 컴포넌트를 호출하는게 되는 과정이다. 따라서 초기 렌더링 단계에서 리액트는 루트 컴포넌트를 호출하고, 이후 리렌더링 단계에서는 상태값이 업데이트 된 컴포넌트를 호출하게 된다 . 해당 렌더링 단계에서는 실제 DOM에 어떠한 변화를 주지 않고, DOM이 어떻게 표시될지 혹은 어떠한 변경사항이 일어났는지 계산만 이루어진다. 구체적인 상황은 다음과 같다.
- 초기 렌더링 : 표시될 전체 DOM 구조를 파악하여, 가상 DOM을 생성한다.
- 리렌더링 : 이전 렌더링 이후 변경된 속성을 계산, 이후 커밋 단계 이전까지는 아무런 작업도 수행하지 않는다.
즉, 위의 모든 단계의 작업은 최신 상태의 가상 DOM을 구성하는 것이다. 하지만 가상 DOM이 실제 브라우저의 DOM에 적용되지는 않은 상태다.
3 단계 : 리액트가 DOM에 변경사항을 커밋
커밋 단계는 리액트가 계산한 최신 상태의 가상DOM을 브라우저 DOM에 적용하는 단계다. 즉, 리액트가 렌더링 단계에서 계산한 최신 DOM의 상태를 브라우저의 화면에 표시하는 것이다.
- 초기 렌더링의 경우, 파악한 DOM 노드를 appendChild() DOM API를 사용하여 화면에 표시한다.
- 리렌더링 경우, 계산된 최소한의 변경 작업들을 화면에 표시한다.
브라우저의 화면에 표시한다는 것은 실제 DOM에 리플로우와 리페인팅이 발생한다는 것이다. 그런데 만약 set함수로 인한 리렌더링의 결과가 이전 DOM과 같다면, 리액트는 브라우저의 DOM을 건들지 않는다. 즉 렌더링이 트리거 되더라도 항상 브라우저 DOM에 변화가 발생하는 것은 아니다.
마치며
이상 리액트의 렌더링 과정에 대해 알아보았다. 처음 리액트 프로그래밍을 배웠을 때를 생각해보면 렌더링에 대해 고려하지 않고는 했다. 컴포넌트 분할을 하지 않고, 하나의 컴포넌트 안에 많은 것들을 때려넣다 보니 불필요한 렌더링이 발생하기도 했다. 기본적인 부분들을 모르다보니 발생하는 일들이다. 가장 빨리 배우는 것은 직접 만져보고 경험하는 것이라 생각한다. 하지만 빠르게 경험하고 만들다보면 기본을 놓치게 되는 경우들이 종종 있는 것 같다. 이러한 기본들을 항상 잊지 않고 알아두는 습관이 중요한 것 같다.
Comments